<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UFO Max 系统管理界面</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            display: flex;
            height: 100vh;
            overflow: hidden;
            background-color: #1e1e1e;
            color: #d4d4d4;
        }

        /* 主容器 */
        .main-container {
            display: flex;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 左侧功能菜单 */
        .sidebar {
            width: 70px;
            background-color: #252526;
            border-right: 1px solid #3e3e42;
            display: flex;
            flex-direction: column;
        }

        .function-menu {
            flex: 1;
            overflow-y: auto;
        }

        .function-item {
            padding: 15px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #3e3e42;
            transition: background-color 0.2s ease;
        }

        .function-item:hover {
            background-color: #2a2d2e;
        }

        .function-item.active {
            background-color: #0e639c;
            color: white;
        }

        .function-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        /* 右侧内容区域 */
        .content-area {
            flex: 1;
            overflow: hidden;
            background-color: #1e1e1e;
            position: relative;
        }

        .content-frame {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #1e1e1e;
        }

        /* 加载中状态 */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(30, 30, 30, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #cccccc;
            z-index: 1000;
            display: none;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #1e1e1e;
        }

        ::-webkit-scrollbar-thumb {
            background: #424242;
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #4e4e4e;
        }
    </style>
</head>
<body>
    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧功能菜单 -->
        <div class="sidebar">
            <div class="function-menu">
                <div class="function-item active" data-target="file_explorer.html" title="文件资源管理器">
                    <span class="function-icon">📁</span>
                </div>
                <div class="function-item" data-target="html/ai.html" title="AI对话">
                    <span class="function-icon">🤖</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="content-area">
            <iframe class="content-frame" id="content-frame" src="html/file_explorer.html"></iframe>
            <div class="loading-overlay" id="loading-overlay">
                加载中...
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        const contentFrame = document.getElementById('content-frame');
        const loadingOverlay = document.getElementById('loading-overlay');
        const functionItems = document.querySelectorAll('.function-item');
        let currentTarget = 'file_explorer.html';

        // 初始化事件监听
        function initEvents() {
            // 功能菜单项点击事件
            functionItems.forEach(item => {
                item.addEventListener('click', () => {
                    const target = item.dataset.target;
                    if (target !== currentTarget) {
                        loadContent(target);
                    }
                });
            });

            // iframe加载事件
            contentFrame.addEventListener('load', () => {
                // 隐藏加载指示器
                loadingOverlay.style.display = 'none';
            });

            // iframe错误处理
            contentFrame.addEventListener('error', () => {
                loadingOverlay.style.display = 'none';
                alert('页面加载失败，请重试');
            });
        }

        // 加载内容页面
        function loadContent(target) {
            // 更新当前选中项
            functionItems.forEach(item => {
                if (item.dataset.target === target) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });

            // 显示加载指示器
            loadingOverlay.style.display = 'flex';

            // 更新当前目标
            currentTarget = target;

            // 设置iframe源
            contentFrame.src = target;
        }

        // 初始化应用
        function initApp() {
            initEvents();
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>